﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Metropolis - Portfolio</title>
        <meta name="description" content="Multipurpose HTML5 Themplate">
        <meta name="author" content="pixel-industry">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width">

        <!-- stylesheets -->
        <link rel="stylesheet" href="css/basic.css" />
        <link rel="stylesheet" href="css/style.css" />   
        <link rel="stylesheet" href="css/responsive.css" />   
        <link rel="stylesheet" href="css/red.css" />
        <link rel="stylesheet" href="css/prettyPhoto.css" media="screen" />

        <!-- Fonts -->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&amp;subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic' rel='stylesheet' type='text/css'>

        <!-- Icons -->
        <link rel="stylesheet" href="pixons/style.css" />
        <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" />
        
        <link rel="stylesheet" href="style-switcher/styleSwitcher.css" media="screen" />

        <!--[if lt IE 9]>
            <script src="js/html5shiv.js"></script>
        <![endif]-->
        
        <!--[if lt IE 9]>
            <script src="js/selectivizr-min.js"></script>
        <![endif]-->
        
        <!--[if IE 8]>
            <link rel="stylesheet" href="css/ie8.css" media="screen" />
        <![endif]-->
    </head>

    <body>
        <!-- style switcher start -->
        <section id="style-switcher">
            <section id="styles-container">
                <section>
                    <h6>Layouts</h6>
                    <ul class="skin-list">
                        <li class="metropolis-default"><a href="../metropolis-default/portfolio3-alt.html">Default</a></li>
                        <li class="metropolis-clean active"><a href="#">Clean & Minimal</a></li>
                        <li class="metropolis-blue"><a href="../metropolis-blue/portfolio3-alt.html">Creative Blue</a></li>
                    </ul>
                </section>

                <section class="first">
                    <h6>Color Style</h6>
                    <p>Which theme color you want to use? Here are some predefined colors.</p>
                    <ul class="styles-list">
                        <li class="blue">1</li>
                        <li class="green">2</li>
                        <li class="orange">3</li>                        
                        <li class="red">4</li>
                        <li class="yellow">5</li>
                    </ul>
                </section>
            </section>
            <a href="#" id="styles-button"><div id="switcher-logo"></div></a>
        </section><!-- style switcher end -->
        
        <!-- #header-wrapper start -->
        <section id="header-wrapper" class="clearfix">
            <!-- #header start -->
            <header id="header" class="clearfix">

                <!-- #logo start -->
                <section id="logo">
                    <a href="index.html">
                        <img src="img/red/logo.png" alt="logo" />
                    </a>
                </section><!-- #logo end -->

                <!-- contact-info-container  start-->
                <section id="contact-info-container">
                    <ul class="info">
                        <li>
                            <span class="text-dark">Call us on:</span> +00 123 5874
                        </li>

                        <li>
                            <span class="text-dark">Email: </span>
                            <a class="text-color" href="malito:sales-info@business.com">sales-info@business.com</a>
                        </li>
                    </ul>

                    <ul class="social-links">
                        <li>
                            <a href="#" class="pixons-twitter-1"></a>
                        </li>

                        <li>
                            <a href="#" class="pixons-linkedin"></a>
                        </li>

                        <li>
                            <a href="#" class="pixons-facebook-1"></a>
                        </li>

                        <li>
                            <a href="#" class="pixons-xing"></a>
                        </li>

                        <li>
                            <a href="#" class="pixons-skype"></a>
                        </li>
                    </ul>
                </section><!-- .contact-info-container end -->
            </header><!-- #header end -->

            <!-- #nav-container start -->
            <section id="nav-container">

                <section class="container_12">
                    <section class="grid_12">
                        <!-- #nav start -->
                        <nav id="nav">
                            <ul>
                                <li>
                                    <span class="nav-icon icon-home"></span>
                                    <a href="index.html">Home</a>
                                </li>

                                <li>
                                    <span class="nav-icon icon-user"></span>
                                    <a href="#">Pages</a>
                                    <ul>
                                        <li><a href="about.html">About</a></li>
                                        <li><a href="services.html">Services</a></li>
                                        <li><a href="faq.html">FAQ</a></li>
                                        <li><a href="page-sidebar-left.html">Page sidebar left</a></li>
                                        <li><a href="page-sidebar-right.html">Page sidebar right</a></li>
                                        <li><a href="pricing.html">Pricing tables</a></li>
                                    </ul>
                                </li>

                                <li class="current-menu-item">
                                    <span class="nav-icon icon-camera"></span>
                                    <a href="#">Portfolio</a>
                                    <ul>
                                        <li><a href="portfolio1.html">Portfolio 1</a></li>
                                        <li><a href="portfolio2.html">Portfolio 2</a></li>
                                        <li><a href="portfolio2-alt.html">Portfolio 2 alternative</a></li>
                                        <li><a href="portfolio3.html">Portfolio 3</a></li>
                                        <li class="current-menu-item"><a href="portfolio3-alt.html">Portfolio 3 alternative</a></li>
                                        <li><a href="portfolio4.html">Portfolio 4</a></li>
                                        <li><a href="portfolio4-alt.html">Portfolio 4 alternative</a></li>
                                        <li><a href="portfolio-gallery.html">Portfolio gallery</a></li>
                                        <li><a href="portfolio-single.html">Portfolio single</a></li>
                                    </ul>
                                </li>

                                <li>
                                    <span class="nav-icon icon-list"></span>
                                    <a href="#">Blog</a>

                                    <ul>
                                        <li><a href="blog.html">Blog default</a></li>
                                        <li><a href="blog-alt.html">Blog alternative</a></li>
                                        <li><a href="blog-single.html">Blog single</a></li>
                                    </ul>
                                </li>

                                <li>
                                    <span class="nav-icon icon-cogs"></span>
                                    <a href="#">Shortcodes</a>
                                    <ul>
                                        <li><a href="shortcodes.html">Page elements</a></li>
                                        <li><a href="#">Third level</a>
                                            <ul>
                                                <li><a href="#">Menu item</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>

                                <li>
                                    <span class="nav-icon icon-map-marker"></span>
                                    <a href="contact.html">Contact</a>
                                </li>
                            </ul>
                        </nav><!-- #nav end -->
                        
                        <!-- responsive navigation start -->
                        <select id="nav-responsive">
                            <option selected="" value="">Site Navigation...</option>

                            <option value="index.html">Home version 1</option>

                            <option value="about.html">About us</option>
                            <option value="services.html">Services</option>
                            <option value="faq.html">FAQ Page</option>
                            <option value="page-sidebar-left.html">Page sidebar left</option>
                            <option value="page-sidebar-right.html">Page sidebar right</option>
                            <option value="pricing.html">Pricing tables</option>

                            <option value="portfolio1.html">Portfolio 1 column</option>
                            <option value="portfolio2.html">Portfolio 2 columns</option>
                            <option value="portfolio2-alt.html">Portfolio 2 alternative</option>
                            <option value="portfolio3.html">Portfolio 3 columns</option>
                            <option value="portfolio3-alt.html">Portfolio 3 alternative</option>
                            <option value="portfolio4.html">Portfolio 4 columns</option>
                            <option value="portfolio4-alt.html">Portfolio 4 alternative</option>
                            <option value="portfolio-gallery.html">Portfolio gallery</option>
                            <option value="portfolio-single.html">Portfolio single</option>

                            <option value="blog.html">Blog default</option>
                            <option value="blog-alt.html">Blog alternative</option>
                            <option value="blog-single.html">Blog single</option>

                            <option value="shortcodes.html">Shortcodes</option>
                            <option value="contact.html">Contact</option>
                        </select><!-- responsive navigation end -->

                        <!-- #search-box start -->
                        <section id="search-box">
                            <form action="#" method="get">
                                <input id="m_search" name="s" type="text" placeholder="Type and hit enter..." />
                                <input class="search-submit" type="submit" />
                            </form>
                        </section><!-- #search-box end -->
                    </section><!-- .grid_12 end -->
                </section><!-- .container_12 end -->

            </section><!-- #nav-container end -->
        </section><!-- #header-wrapper end -->

        <!-- .top-shadow -->
        <div class="top-shadow"></div>

        <!-- .page-title-container start -->
        <section class="page-title-container">

            <!-- .container_12 start -->
            <div class="container_12">

                <!-- .page-title start -->
                <div class="page-title grid_12">
                    <div class="title">
                        <h1>Portfolio 3 columns</h1>
                    </div>

                    <ul class="breadcrumbs">
                        <li><a  class="home" href="#">Home</a></li>
                        <li>/</li>
                        <li><span class="active">Portfolio 3 column alt</span></li>
                    </ul>
                </div><!-- .page-title end -->
            </div><!-- .container_12 end -->
        </section><!-- .page-title-container end -->

        <!-- #content-wrapper start -->
        <section id="content-wrapper">

            <!-- .container_12 start -->
            <div class="container_12">
                
                <!-- .grid_12 .quicksand-filter-container -->
                <section class="grid_12 quicksand-filter-container">
                    <span>CATEGORIES: </span>
                    <!-- portfolio quicksand filter start -->
                    <ul id="quicksand-filter">
                        <li class="active"><a class="all" href="#">All</a></li>
                        <li><a class="photography" href="#">Photography</a></li>
                        <li><a class="webdesign" href="#">Web Design</a></li>
                        <li><a class="graphicdesign" href="#">Graphic design</a></li>
                    </ul><!-- portfolio quicksand filter end -->
                </section><!-- .grid_12 .quicksand-filter-container end -->
                
            </div><!-- .container_12 start -->

            <!-- .container_12.cearfix start -->
            <section class="container_12 clearfix">
                
                <!-- #filter-item start -->
                <ul id="filter-item">
                    
                    <!-- .grid_4.portfolio-style-1 start -->
                    <li data-id="id-1" class="grid_4 portfolio-style-1"  data-alpha="photography">
                        
                        <!-- .portfolio.clearfix start -->
                        <figure class="portfolio">
                            
                            <!-- .portfolio-image start -->
                            <div class="portfolio-image">
                                <a href="portfolio-single.html">
                                    <img src="img/portfolio/1col/portfolio-1.jpg" width="300" alt="portfolio">
                                </a>

                                <!-- .portfolio-hover start -->
                                <div class="portfolio-hover">
                                    <div class="mask"></div>
                                    <ul>
                                        <li class="portfolio-zoom">
                                            <a href="img/portfolio/1col/portfolio-1.jpg" 
                                               data-gal="prettyPhoto[pp_gallery]">zoom
                                            </a>
                                        </li>

                                        <li class="portfolio-single">
                                            <a href="portfolio-single.html">single</a>
                                        </li>
                                    </ul>
                                </div><!-- .portfolio-hover end -->
                            </div><!-- .portfolio-image end -->
                        </figure><!-- .portfolio-clearfix end -->

                        <!-- .portfolio-info start -->
                        <article class="portfolio-info">
                            <h3>Lorem Lpsum Dolor Sit Amet</h3>

                            <ul class="meta">
                                <li>
                                    <span>
                                        Web Design, Photography 
                                    </span>
                                    //
                                </li>

                                <li class="date">APRIL 29, 2013</li>
                            </ul><!-- .meta end -->

                            <p>
                                Lorem ipsum dolor sit amet, consectetur 
                                adipiscing elit. Nam viverra euismod odio, 
                                gravida pellentesque urna varius vitae. Sed dui 
                                lorem, adipiscing in adipiscing et, interdum nec 
                                metus. 
                            </p>
                            
                            <br />

                            <!-- .btn-group start -->
                            <div class="btn-group">
                                <a class="btn-medium white" href="portfolio-single.html">
                                    <span>View Project</span>
                                </a>
                                
                                <a class="btn-medium white">
                                    <span>Visit Website</span>
                                </a>
                            </div><!-- .btn-group end -->
                            
                        </article><!-- .portfolio-info end -->
                    </li><!-- .grid_4.portfolio-style-1 end -->
                    
                    <!-- .grid_4.portfolio-style-1 start -->
                    <li data-id="id-2" class="grid_4 portfolio-style-1"  data-alpha="webdesign">
                        
                        <!-- .portfolio.clearfix start -->
                        <figure class="portfolio">
                            
                            <!-- .portfolio-image start -->
                            <div class="portfolio-image">
                                <a href="portfolio-single.html">
                                    <img src="img/portfolio/1col/portfolio-2.jpg" width="300" alt="portfolio">
                                </a>

                                <div class="portfolio-hover">
                                    <div class="mask"></div>
                                    <ul>
                                        <li class="portfolio-zoom">
                                            <a href="img/portfolio/1col/portfolio-2.jpg" 
                                               data-gal="prettyPhoto[pp_gallery]">zoom
                                            </a>
                                        </li>

                                        <li class="portfolio-single">
                                            <a href="portfolio-single.html">single</a>
                                        </li>
                                    </ul>
                                </div><!-- .portfolio-hover end -->
                            </div><!-- .portfolio-image end -->
                        </figure><!-- .portfolio.clearfix end -->

                        <!-- .portfolio-info start -->
                        <article class="portfolio-info">
                            <h3>Sed ut perspiciatis</h3>

                            <ul class="meta">
                                <li>
                                    <span>
                                        Web Design
                                    </span>
                                    //
                                </li>

                                <li class="date">APRIL 29, 2013</li>
                            </ul>

                            <p>
                                Lorem ipsum dolor sit amet, consectetur 
                                adipiscing elit. Nam viverra euismod odio, 
                                gravida pellentesque urna varius vitae. Sed dui 
                                lorem, adipiscing in adipiscing et, interdum nec 
                                metus.
                            </p>
                            
                            <br />

                            <!-- .btn-group start -->
                            <div class="btn-group">
                                <a class="btn-medium white" href="portfolio-single.html">
                                    <span>View Project</span>
                                </a>
                                
                                <a class="btn-medium white">
                                    <span>Visit Website</span>
                                </a>
                            </div><!-- .btn-group end -->
                            
                        </article><!-- .portfolio-info end -->
                        
                    </li><!-- .grid_4.portfolio-style-1 end -->
                                        
                    <!-- .grid_4.portfolio-style-1 start -->
                    <li data-id="id-3" class="grid_4 portfolio-style-1"  data-alpha="graphicdesign">
                        
                        <!-- .portfolio start -->
                        <figure class="portfolio">
                            
                            <!-- .portfolio-image start -->
                            <div class="portfolio-image">
                                <a href="portfolio-single.html">
                                    <img src="img/portfolio/1col/portfolio-3.jpg" width="300" alt="portfolio">
                                </a>

                                <div class="portfolio-hover">
                                    <div class="mask"></div>
                                    <ul>
                                        <li class="portfolio-zoom">
                                            <a href="img/portfolio/1col/portfolio-3.jpg" 
                                               data-gal="prettyPhoto[pp_gallery]">zoom
                                            </a>
                                        </li>

                                        <li class="portfolio-single">
                                            <a href="portfolio-single.html">single</a>
                                        </li>
                                    </ul>
                                </div><!-- .portfolio-hover end -->
                            </div><!-- .portfolio-image end -->
                        </figure><!-- .portfolio end -->

                        <!-- .portfolio-info start -->
                        <article class="portfolio-info">
                            <h3>Nam viverra euismod</h3>

                            <ul class="meta">
                                <li>
                                    <span>
                                        Graphic Design 
                                    </span>
                                    //
                                </li>

                                <li class="date">APRIL 29, 2013</li>
                            </ul>

                            <p>
                                Lorem ipsum dolor sit amet, consectetur 
                                adipiscing elit. Nam viverra euismod odio, 
                                gravida pellentesque urna varius vitae. Sed dui 
                                lorem, adipiscing in adipiscing et, interdum nec 
                                metus. 
                            </p>
                            
                            <br />

                            <!-- .btn-group start -->
                            <div class="btn-group">
                                <a class="btn-medium white" href="portfolio-single.html">
                                    <span>View Project</span>
                                </a>
                                
                                <a class="btn-medium white">
                                    <span>Visit Website</span>
                                </a>
                            </div><!-- .btn-group end -->
                            
                        </article><!-- .portfolio-info end -->
                    </li><!-- .grid_4.portfolio-style-1 end -->
                    
                    
                    <li class="clearfix"></li>
                    
                    <!-- .grid_4.portfolio-style-1 start -->
                    <li data-id="id-4" class="grid_4 portfolio-style-1"  data-alpha="photography">
                        
                        <!-- .portfolio start -->
                        <figure class="portfolio">
                            
                            <!-- .portfolio-image start -->
                            <div class="portfolio-image">
                                <a href="portfolio-single.html">
                                    <img src="img/portfolio/1col/portfolio-4.jpg" width="300" alt="portfolio">
                                </a>

                                <div class="portfolio-hover">
                                    <div class="mask"></div>
                                    <ul>
                                        <li class="portfolio-zoom">
                                            <a href="img/portfolio/1col/portfolio-4.jpg" 
                                               data-gal="prettyPhoto[pp_gallery]">zoom
                                            </a>
                                        </li>

                                        <li class="portfolio-single">
                                            <a href="portfolio-single.html">single</a>
                                        </li>
                                    </ul>
                                </div><!-- .portfolio-hover end -->
                            </div><!-- portfolio-image end -->
                        </figure><!-- .portfolio end -->

                        <!-- .portfolio-info start -->
                        <article class="portfolio-info">
                            <h3>Sed dui lorem</h3>

                            <ul class="meta">
                                <li>
                                    <span>
                                        Web Design, Photography 
                                    </span>
                                    //
                                </li>

                                <li class="date">APRIL 29, 2013</li>
                            </ul>

                            <p>
                                Lorem ipsum dolor sit amet, consectetur 
                                adipiscing elit. Nam viverra euismod odio, 
                                gravida pellentesque urna varius vitae. Sed dui 
                                lorem, adipiscing in adipiscing et, interdum nec 
                                metus. 
                            </p>
                            
                            <br />

                            <div class="btn-group">
                                <a class="btn-medium white" href="portfolio-single.html">
                                    <span>View Project</span>
                                </a>
                                
                                <a class="btn-medium white">
                                    <span>Visit Website</span>
                                </a>
                            </div><!-- .btn-group end -->
                        </article><!-- .portfolio-info end -->
                    </li><!-- .grid_4.portfolio-style-1 end -->
                    
                    <!-- .grid_4.portfolio-style-1 start -->
                    <li data-id="id-5" class="grid_4 portfolio-style-1"  data-alpha="webdesign">
                        
                        <!-- .portfolio start -->
                        <figure class="portfolio">
                            
                            <!-- .portfolio-image start -->
                            <div class="portfolio-image">
                                <a href="portfolio-single.html">
                                    <img src="img/portfolio/1col/portfolio-5.jpg" width="300" alt="portfolio">
                                </a>

                                <div class="portfolio-hover">
                                    <div class="mask"></div>
                                    <ul>
                                        <li class="portfolio-zoom">
                                            <a href="img/portfolio/1col/portfolio-5.jpg" 
                                               data-gal="prettyPhoto[pp_gallery]">zoom
                                            </a>
                                        </li>

                                        <li class="portfolio-single">
                                            <a href="portfolio-single.html">single</a>
                                        </li>
                                    </ul>
                                </div><!-- .portfolio-hover end -->
                            </div><!-- .portfolio-image end -->
                        </figure><!-- .portfolio end -->

                        <!-- .portfolio-info start -->
                        <article class="portfolio-info">
                            <h3>Interdum nec metus</h3>

                            <ul class="meta">
                                <li>
                                    <span>
                                        Web Design
                                    </span>
                                    //
                                </li>

                                <li class="date">APRIL 29, 2013</li>
                            </ul>

                            <p>
                                Lorem ipsum dolor sit amet, consectetur 
                                adipiscing elit. Nam viverra euismod odio, 
                                gravida pellentesque urna varius vitae. Sed dui 
                                lorem, adipiscing in adipiscing et, interdum nec 
                                metus. 
                            </p>
                            
                            <br />

                            <div class="btn-group">
                                <a class="btn-medium white" href="portfolio-single.html">
                                    <span>View Project</span>
                                </a>
                                
                                <a class="btn-medium white">
                                    <span>Visit Website</span>
                                </a>
                            </div><!-- .btn-group end -->
                        </article><!-- .portfolio-info end -->
                    </li><!-- .grid_4.portfolio-style-1 end -->
                    
                    <!-- .grid_4.portfolio-style-1 start -->
                    <li data-id="id-6" class="grid_4 portfolio-style-1"  data-alpha="webdesign">
                        
                        <!-- .portfolio start -->
                        <figure class="portfolio">
                            
                            <!-- .portfolio-image start -->
                            <div class="portfolio-image">
                                <a href="portfolio-single.html">
                                    <img src="img/portfolio/1col/portfolio-6.jpg" width="300" alt="portfolio">
                                </a>

                                <div class="portfolio-hover">
                                    <div class="mask"></div>
                                    <ul>
                                        <li class="portfolio-zoom">
                                            <a href="img/portfolio/1col/portfolio-6.jpg" 
                                               data-gal="prettyPhoto[pp_gallery]">zoom
                                            </a>
                                        </li>

                                        <li class="portfolio-single">
                                            <a href="portfolio-single.html">single</a>
                                        </li>
                                    </ul>
                                </div><!-- .portfolio-hover end -->
                            </div><!-- .portfolio-image end -->
                        </figure><!-- .portfolio end -->

                        <!-- .portfolio-info start -->
                        <article class="portfolio-info">
                            <h3>Lorem Lpsum Dolor</h3>

                            <ul class="meta">
                                <li>
                                    <span>
                                        Web Design 
                                    </span>
                                    //
                                </li>

                                <li class="date">APRIL 29, 2013</li>
                            </ul>

                            <p>
                                Lorem ipsum dolor sit amet, consectetur 
                                adipiscing elit. Nam viverra euismod odio, 
                                gravida pellentesque urna varius vitae. Sed dui 
                                lorem, adipiscing in adipiscing et, interdum nec 
                                metus. 
                            </p>
                            
                            <br />

                            <div class="btn-group">
                                <a class="btn-medium white" href="portfolio-single.html">
                                    <span>View Project</span>
                                </a>
                                
                                <a class="btn-medium white">
                                    <span>Visit Website</span>
                                </a>
                            </div><!-- .btn-group end -->
                        </article><!-- .portfolio-info end -->
                    </li><!-- .grid_4.portfolio-style-1 end -->
                    
                    <li class="clearfix"></li>
                    
                    <!-- .grid_4.portfolio-style-1 start -->
                    <li data-id="id-7" class="grid_4 portfolio-style-1"  data-alpha="photography">
                        <!-- .portfolio start -->
                        <figure class="portfolio">
                            
                            <!-- .portfolio-image start -->
                            <div class="portfolio-image">
                                <a href="portfolio-single.html">
                                    <img src="img/portfolio/1col/portfolio-7.jpg" width="300" alt="portfolio">
                                </a>

                                <div class="portfolio-hover">
                                    <div class="mask"></div>
                                    <ul>
                                        <li class="portfolio-zoom">
                                            <a href="img/portfolio/1col/portfolio-7.jpg" 
                                               data-gal="prettyPhoto[pp_gallery]">zoom
                                            </a>
                                        </li>

                                        <li class="portfolio-single">
                                            <a href="portfolio-single.html">single</a>
                                        </li>
                                    </ul>
                                </div><!-- .portfolio-hover end -->
                            </div><!-- .portfolio-image end -->
                        </figure><!-- .portfolio end -->

                        <!-- .portfolio-info start -->
                        <article class="portfolio-info">
                            <h3>Lectus Purus Comodo</h3>

                            <ul class="meta">
                                <li>
                                    <span>
                                        Photography 
                                    </span>
                                    //
                                </li>

                                <li class="date">APRIL 29, 2013</li>
                            </ul>

                            <p>
                                Lorem ipsum dolor sit amet, consectetur 
                                adipiscing elit. Nam viverra euismod odio, 
                                gravida pellentesque urna varius vitae. Sed dui 
                                lorem, adipiscing in adipiscing et, interdum nec 
                                metus.
                            </p>
                            
                            <br />

                            <div class="btn-group">
                                <a class="btn-medium white" href="portfolio-single.html">
                                    <span>View Project</span>
                                </a>
                                
                                <a class="btn-medium white">
                                    <span>Visit Website</span>
                                </a>
                            </div><!-- .btn-group end -->
                        </article><!-- .portfolio-info end -->
                    </li><!-- .grid_4.portfolio-style-1 end -->
                    
                    <!-- .grid_4.portfolio-style-1 start -->
                    <li data-id="id-8" class="grid_4 portfolio-style-1"  data-alpha="graphicdesign">
                        <!-- .portfolio start -->
                        <figure class="portfolio">
                            
                            <!-- .portfolio-image start -->
                            <div class="portfolio-image">
                                <a href="portfolio-single.html">
                                    <img src="img/portfolio/1col/portfolio-8.jpg" width="300" alt="portfolio">
                                </a>

                                <div class="portfolio-hover">
                                    <div class="mask"></div>
                                    <ul>
                                        <li class="portfolio-zoom">
                                            <a href="img/portfolio/1col/portfolio-8.jpg" 
                                               data-gal="prettyPhoto[pp_gallery]">zoom
                                            </a>
                                        </li>

                                        <li class="portfolio-single">
                                            <a href="portfolio-single.html">single</a>
                                        </li>
                                    </ul>
                                </div><!-- .portfolio-hover end -->
                            </div><!-- .portfolio-image end -->
                        </figure><!-- .portfolio end -->

                        <!-- .portfolio-info start -->
                        <article class="portfolio-info">
                            <h3>Vestibulum Adipiscing Tempor</h3>

                            <ul class="meta">
                                <li>
                                    <span>
                                        Graphic Design 
                                    </span>
                                    //
                                </li>

                                <li class="date">APRIL 29, 2013</li>
                            </ul>

                            <p>
                                Lorem ipsum dolor sit amet, consectetur 
                                adipiscing elit. Nam viverra euismod odio, 
                                gravida pellentesque urna varius vitae. Sed dui 
                                lorem, adipiscing in adipiscing et, interdum nec 
                                metus. 
                            </p>
                            
                            <br />

                            <div class="btn-group">
                                <a class="btn-medium white" href="portfolio-single.html">
                                    <span>View Project</span>
                                </a>
                                
                                <a class="btn-medium white">
                                    <span>Visit Website</span>
                                </a>
                            </div><!-- .btn-group end -->
                        </article><!-- .portfolio-info end -->
                    </li><!-- .grid_4.portfolio-style-1 end -->
                    
                    <!-- .grid_4.portfolio-style-1 start -->
                    <li data-id="id-9" class="grid_4 portfolio-style-1"  data-alpha="graphicdesign">
                        <!-- .portfolio start -->
                        <figure class="portfolio">
                            
                            <!-- .portfolio-image start -->
                            <div class="portfolio-image">
                                <a href="portfolio-single.html">
                                    <img src="img/portfolio/1col/portfolio-9.jpg" width="300" alt="portfolio">
                                </a>

                                <div class="portfolio-hover">
                                    <div class="mask"></div>
                                    <ul>
                                        <li class="portfolio-zoom">
                                            <a href="img/portfolio/1col/portfolio-9.jpg" 
                                               data-gal="prettyPhoto[pp_gallery]">zoom
                                            </a>
                                        </li>

                                        <li class="portfolio-single">
                                            <a href="portfolio-single.html">single</a>
                                        </li>
                                    </ul>
                                </div><!-- .portfolio-hover end -->
                            </div><!-- .portfolio-image end -->
                        </figure><!-- .portfolio end -->

                        <!-- .portfolio-info start -->
                        <article class="portfolio-info">
                            <h3>Lorem Lpsum Dolor Sit Amet</h3>

                            <ul class="meta">
                                <li>
                                    <span>
                                        Graphic Design 
                                    </span>
                                    //
                                </li>

                                <li class="date">APRIL 29, 2013</li>
                            </ul>

                            <p>
                                Lorem ipsum dolor sit amet, consectetur 
                                adipiscing elit. Nam viverra euismod odio, 
                                gravida pellentesque urna varius vitae. Sed dui 
                                lorem, adipiscing in adipiscing et, interdum nec 
                                metus. 
                            </p>
                            
                            <br />

                            <div class="btn-group">
                                <a class="btn-medium white" href="portfolio-single.html">
                                    <span>View Project</span>
                                </a>
                                
                                <a class="btn-medium white">
                                    <span>Visit Website</span>
                                </a>
                            </div><!-- .btn-group end -->
                        </article><!-- .portfolio-info end -->
                    </li><!-- .grid_4.portfolio-style-1 end -->
                </ul><!-- #filter-item end -->
                
                <!-- .grid_12.portfolio-pagination start -->
                <ul class="grid_12 portfolio-pagination">
                    
                    <!-- .pagination start -->
                    <li class="pagination">
                        <a class="pagination-prev" href="#">&#60; Previous</a>

                        <div class="pager">
                            <ul>
                                <li class="active">
                                    <a href="#">1</a>
                                </li>

                                <li>
                                    <a href="#">2</a>
                                </li>

                                <li>
                                    <a href="#">3</a>
                                </li>
                            </ul>
                        </div>

                        <a class="pagination-next" href="#">Next &#62;</a>
                    </li><!-- .pagination end -->
                    
                </ul><!-- .grid_12.portfolio-pagination end -->
                
            </section><!-- .container_12.clearfix end -->
            
        </section><!-- #content-wrapper end -->

        <!-- #footer-wrapper start -->
        <div id="footer-wrapper" class="clearfix">

            <!-- #footer -->
            <footer id="footer" class="container_12">

                <!-- .footer-widget-container start -->
                <ul class="footer-widget-container grid_3">
                    
                    <!-- .widget.widget_text start -->
                    <li class="widget widget_text">

                        <section class="carousel-article">
                            <img src="img/red/logo-footer.png" alt="logo" />

                            <br /><br />

                            <ul id="foo1" class="carousel-li">
                                <li>
                                    <p>
                                        We proudly present you Metropolis, perfectly 
                                        clean and original theme. This is sliding 
                                        article, yo you can put more info about your 
                                        company.  
                                    </p>
                                </li>

                                <li>
                                    <p>
                                        Sed ut perspiciatis unde omnis iste natus error 
                                        sit voluptatem accusantium doloremque laudantium, 
                                        totam rem aperiam, eaque ipsa quae ab illo 
                                        inventore veritatis et quasi. 
                                    </p>
                                </li>

                                <li>
                                    <p>
                                        Sed ut perspiciatis unde omnis iste natus error 
                                        sit voluptatem accusantium doloremque laudantium, 
                                        totam rem aperiam, eaque ipsa quae ab illo 
                                        inventore veritatis et quasi. 
                                    </p>
                                </li>
                            </ul>

                            <div class="clearfix"></div>

                            <div class="carousel-pagination" id="foo1_pag"></div>
                        </section>

                    </li><!-- .widget.widget_text end -->
                </ul><!-- .footer-widget-container end -->

                <!-- .footer-widget-container start -->
                <ul class="footer-widget-container grid_3">
                    <!-- .widget pi_recent_posts start -->
                    <li class="widget pi_recent_posts">
                        <div class="title">
                            <h5>latest posts</h5>
                        </div>

                        <ul class="footer-blog">
                            <li>
                                <div class="meta">
                                    <a class="icon-edit"></a>
                                </div>

                                <div class="post">
                                    <a href="blog-single.html"> Nam libero tempore, </a>
                                    <p class="info">26 MARCH 2013, <a href="blog-single.html">0 COMMENTS</a></p>
                                </div>
                            </li>

                            <li>
                                <div class="meta">
                                    <a class="icon-link"></a>
                                </div>

                                <div class="post">
                                    <a href="blog-single.html">Temporibus autem quibusdam, </a>
                                    <p class="info">26 MARCH 2013, <a href="blog-single.html">2 COMMENTS</a></p>
                                </div>
                            </li>

                            <li>
                                <div class="meta">
                                    <a class="icon-camera"></a>
                                </div>

                                <div class="post">
                                    <a href="blog-single.html">Excepteur sint occaecat cupid, </a>
                                    <p class="info">26 MARCH 2013, <a href="blog-single.html">2 COMMENTS</a></p>
                                </div>
                            </li>
                        </ul>


                    </li><!-- .widget pi_recent_posts end -->
                </ul><!-- .footer-widget-container end -->

                <!-- .footer-widget-container start -->
                <ul class="footer-widget-container grid_3">
                    
                    <!-- .widget.widget_text start -->
                    <li class="widget widget_text">
                        <div class="title">
                            <h5>get in touch</h5>
                        </div>
                        <p>
                            If you have any questions don't hesitate to contact us
                        </p>

                        <br />

                        <ul class="contact-info">
                            <li class='address'>
                                <p>Address: Some street 123, Manhattan, New York, USA</p>
                            </li>

                            <li class="phone">
                                <p>Telephone: +00 123 5874</p>
                            </li>

                            <li class="mail">
                                <p>Email: <a href='mailto:sales-info@business.com'>info@business.com</a></p>
                            </li>
                        </ul>
                    </li><!-- .widget.widget_text end -->
                </ul><!-- .footer-widget-container end -->

                <!-- .footer-widget-container start -->
                <ul class="footer-widget-container grid_3">
                    
                    <!-- .widget.widget_text start -->
                    <li class="widget widget_text">
                        <div class="title">
                            <h5>newsletter subscribe</h5>
                        </div>

                        <p>
                            Stay up to date with latest news from our company. 
                            We promise we won’t spam you.
                        </p>

                        <br />

                        <form class="newsletter">
                            <input type="email" class="email" placeholder="Enter your email here...">
                            <input type ="submit" class="submit" value="SEND">
                        </form>
                    </li><!-- .widget.widget_text end -->

                </ul><!-- footer-widget-container end -->
            </footer><!-- #footer end -->

            <!-- .container_12.copyright-container start -->
            <div class="container_12 copyright-container">
                
                <!-- .grid_12 start -->
                <div class="grid_12">                  

                    <div class="grid_6 alpha">
                        <p>
                            Copyright Metropolis 2013. Designed by Pixel industry. All rights reserved.
                        </p>
                    </div>

                    <div class="grid_6 omega">
                        <ul class="footer-breadcrumbs">
                            <li>
                                <a href="index.html">Home</a>
                            </li>

                            <li>
                                <a href="about.html">About</a>
                            </li>

                            <li>
                                <a href="portfolio1.html">Portfolio</a>
                            </li>

                            <li>
                                <a href="blog.html">Blog</a>
                            </li>

                            <li>
                                <a href="contact.html">Contact</a>
                            </li>
                        </ul>
                    </div><!-- .grid_6 omega end -->
                </div><!-- .grid_12 end -->
            </div><!-- .container_12.copyright-container end -->
        </div><!-- #footer-wrapper end -->

        <!-- scripts -->
        <script  src="js/jquery-1.8.3.js"></script> <!-- jQuery library -->  
        <script  src="js/jquery.placeholder.min.js"></script><!-- jQuery placeholder fix for old browsers -->
        <script  src="js/jquery.carouFredSel-6.0.0-packed.js"></script><!-- CarouFredSel carousel plugin -->
        <script  src="js/portfolio.js"></script> <!-- portfolio custom options -->
        <script  src="js/quicksand.js"></script> <!-- quicksand filter -->
        <script  src="js/jquery.prettyPhoto.js"></script> <!-- prettyPhoto lightbox -->
        <script  src="js/jquery.touchSwipe-1.2.5.js"></script><!-- support for touch swipe on mobile devices -->
        <script  src="style-switcher/styleSwitcher.js"></script><!-- Style Switcher plugin -->
        <script  src="js/include.js"></script> <!-- jQuery custom options -->

        <script>
            /* <![CDATA[ */
            // NEWSLETTER FORM AJAX SUBMIT
            $('.newsletter .submit').on('click', function(event){
                event.preventDefault();
                var email = $('.email').val();
                var form_data = new Array({ 'Email' : email});
                $.ajax({
                    type: 'POST',
                    url: "contact.php",
                    data: ({'action': 'newsletter', 'form_data' : form_data})
                }).done(function(data) {
                    alert(data);
                });
            });
            
            // FOOTER CAROUSEL ARTICLE 
            $("#foo1").carouFredSel({
                auto: true,
                scroll: 1,
                pagination: "#foo1_pag",
                swipe: {
                    ontouch: true,
                    onMouse: true
                },
                width: 'variable',
                height: 'variable',
                items:{
                    width: 'auto',
                    visible: 1
                }
            });
            /* ]]> */
        </script>
    </body>
</html>
